<template>
    <div>
        <el-dialog :visible.sync="visible" width="720px" destroy-on-close>
            <template #title>
                <div class="dialog_title">
                    <slot name="title">
                        {{ title }}
                    </slot>
                </div>
            </template>
            <div class="container">
                <div v-if="step === 'beforUpload' || step == 'uploading'">
                    <Uploading
                        :uploadConfig="uploadConfig"
                        ref="upload"
                        @uploadEnd="uploadEnd"
                    ></Uploading>
                </div>
                <div v-else>
                    <Result
                        :result="result"
                        :showResult="showResult"
                        :showErrorFeedback="showErrorFeedback"
                    ></Result>
                </div>
            </div>
            <div class="handleBox" slot="footer" v-if="showFooter">
                <slot name="footer">
                    <el-button
                        type=""
                        size="mini"
                        @click="handle_no"
                        v-if="showtoastFailBtn"
                    >
                        {{ toastFailBtn }}
                    </el-button>
                    <el-button
                        type="primary"
                        size="mini"
                        @click="handle_sure"
                        v-if="showtoastSureBtn"
                    >
                        {{ toastSureBtn }}
                    </el-button>
                    <el-button
                        type="primary"
                        size="mini"
                        @click="uploadFile"
                        v-if="step === 'beforUpload'"
                    >
                        上传
                    </el-button>
                </slot>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Uploading from "./chunk/uploading";
import Result from "./chunk/result";
export default {
    inheritAttrs: false,
    components: { Uploading, Result },
    data() {
        return {
            visible: false,
            /**
             * 上传进度
             * @param beforUpload 上传前
             * @param uploading 上传中
             * @param error 上传有失败
             * @param success 上传全部成功
             */
            step: "beforUpload",
            /**
             * 上传结果
             * @param state 上传结果
             * @param list 全部文件
             * @param success 上传成功的文件
             * @param error 上传失败的文件
             */
            result: [],
        };
    },
    computed: {},
    created() {},
    mounted() {},

    methods: {
        // 触发上传
        uploadFile() {
            if (this.$refs.upload?.fileList?.length == 0) return;
            this.step = "uploading";
            this.$refs.upload.upload_submit();
            this.$modal.loading("正在上传文件，请稍候...");
        },
        // 上传完毕
        uploadEnd(result) {
            this.$modal.closeLoading();
            if (!this.showResult) {
                this.visible = false;
                this.Select(result.data);
            } else {
                this.result = result;
                this.detectionResult(result);
            }
        },
        /**
         * 检查结果
         */
        detectionResult(result) {
            this.step = result.state;
            this.Select(result.data);
        },
        handle_no() {
            this.Cancel();
        },
        handle_sure() {
            this.Cancel();
        },
        Select() {},
        Cancel() {},
    },
};
</script>
<style lang="scss" scoped>
.dialog_title {
    height: 18px;
    .main {
        font-weight: 500;
        font-size: 16px;
        color: #333;
        padding-bottom: 5px;
    }
    .tip {
        color: #eb7785;
        font-size: 12px;
    }
}
.container {
    min-height: 320px;
}
</style>
